
import { Layout, Breadcrumb  } from 'antd';
import MenuPage from "./menu"
import {Head} from "./head"
import {Foot} from "./foot"
import {useEffect} from "react"
import {ajax} from "@/services"
import {inject,observer} from "mobx-react" 
const { Header, Footer, Sider, Content } = Layout;

function MainPage(props){
  useEffect( ()=>{
    getUserInfo()

  },[])
  // 全局的用户信息 
  const getUserInfo = async ()=>{
    let res = await ajax.getuserinfo();
    const {info} = props
    const {result} = res;
    info.changeUserInfo(result)
  }
  return (
      <div style={{width:'100%',height:'100%'}}>
         <Layout style={{width:'100%',height:'100%'}}>
          <MenuPage location={props.location} />
          <Layout>
              <Head></Head>
              <div className="layout" style={{padding:'0 20px',height:'100%',overflow:'auto'}}>
                <Breadcrumb style={{ margin: '16px 0' }}>
                  <Breadcrumb.Item>Home</Breadcrumb.Item>
                  <Breadcrumb.Item>List</Breadcrumb.Item>
                  <Breadcrumb.Item>App</Breadcrumb.Item>
                </Breadcrumb>
                <Content>
                  {props.children} 
                </Content>
              </div>
              <Foot></Foot>
          </Layout>
        </Layout>
      </div>
  )
}

export default inject('info')(observer(MainPage))


function LayoutPage({children}){
  return (
     <div className="layout" style={{padding:'0 20px',height:'100%'}}>
        <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>List</Breadcrumb.Item>
          <Breadcrumb.Item>App</Breadcrumb.Item>
        </Breadcrumb>
        <Content>
          {/* router-view  */}
          {children}  
        </Content>
     </div>
  )
}

